<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="common/head :: htmlhead">
<body>


<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">博物馆省份分布</div>
                <div class="layui-card-body">
                    <div id="provinceChart" style="height: 600px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">工业类型分布</div>
                <div class="layui-card-body">
                    <div id="industryChart" style="height: 300px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">博物馆类型分布</div>
                <div class="layui-card-body">
                    <div id="museumTypeChart" style="height: 300px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">参观者主要类型</div>
                <div class="layui-card-body">
                    <div id="mainvistorChart" style="height: 300px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header ">法人是否独立</div>
                <div class="layui-card-body">
                    <div id="farenChart" style="height: 300px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/static/layui/layui.js"></script>
<script th:inline="javascript" type="text/javascript" charset="UTF-8">
    layui.config({
        base: '/static/lib/' //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(["echarts"],
        function() {

            var $ = layui.jquery,
                element = layui.element,
                echarts = layui.echarts,

                option1 = {
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        data: [[${industryTypeName}]]
                    },
                    series: [{
                        data: [[${industryTypeNum}]],
                        type: 'bar',
                        barMaxWidth: '100',
                        width: '100%',
                        height:'600px'
                    }]
                };
                mychart1 = echarts.init(document.getElementById('industryChart'));
                mychart1.setOption(option1, true);


                option2 = {
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        data: [[${museumTypeName}]]
                    },
                    series: [{
                        data: [[${museumTypeNum}]],
                        type: 'bar',
                        barMaxWidth: '100',
                        width: '100%',
                        height:'600px'
                    }]
                };
                mychart2 = echarts.init(document.getElementById('museumTypeChart'));
                mychart2.setOption(option2, true);

                var mainvistorTypeNum = [[${mainvistorTypeNum}]];
                var mainvistorTypeName = [[${mainvistorTypeName}]];
                var mainvistordata = [];
                for(var i=0; i < mainvistorTypeNum.length; i++){
                    mainvistordata[i] = {value:mainvistorTypeNum[i],name:mainvistorTypeName[i]}
                }

                option3 = {
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left:'left',
                        data: mainvistordata
                    },
                    series : [
                        {
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:mainvistordata,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                mychart3 = echarts.init(document.getElementById('mainvistorChart'));
                mychart3.setOption(option3, true);

                var farenTypeNum = [[${farenTypeNum}]];
                var farenTypeName = [[${farenTypeName}]];
                var farendata = [];
                for(var j=0; j < farenTypeNum.length; j++){
                    farendata[j] = {value:farenTypeNum[j],name:farenTypeName[j]}
                }
                option4 = {
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left:'left',
                        data: farenTypeName
                    },
                    series : [
                        {
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:farendata,
                            emphasis: {
                                itemStyle:{
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                mychart4 = echarts.init(document.getElementById('farenChart'));
                mychart4.setOption(option4, true);


                option5 = {
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        data: [[${provinceTypeName}]]
                    },
                    series: [{
                        data: [[${provinceTypeNum}]],
                        type: 'bar',
                        barMaxWidth: '100'

                    }]
                };
                mychart5 = echarts.init(document.getElementById('provinceChart'));
                mychart5.setOption(option5, true);
        }
    );
</script>
</body>
</html>